<template>
    <div class="login">
        <div class="login-container">
            <div class="login-header">
                <img src="@/assets/images/login/title.png" alt="" />
            </div>
            <div class="login-body">
                <div class="login-main">
                    <div class="form-title">账号登录</div>
                    <div class="form-main">
                        <div class="user form-label">
                            <i><img src="@/assets/images/login/user.png"/></i>
                            <input
                                type="text"
                                placeholder="请输入用户名"
                                v-model="username"
                                @keydown="enterAction($event)"
                                autocomplete="no"
                            />
                            <div class="point"></div>
                        </div>
                        <div class="pwd form-label">
                            <i><img src="@/assets/images/login/pwd.png"/></i>
                            <input
                                type="password"
                                placeholder="请输入密码"
                                v-model="password"
                                @keydown="enterAction($event)"
                                autocomplete="new-password"
                            />
                            <div class="point"></div>
                        </div>
                        <div class="remember-me">
                            <span :class="['radio-btn', isChecked && 'active']" @click="isChecked = !isChecked"></span>
                            <span>记住账号密码</span>
                        </div>
                        <div
                            class="login-btn"
                            :class="loginBtn"
                            @click="login"
                            @mousedown="loginBtn = 'loginAcitve'"
                            @mouseup="loginBtn = 'login_btn'"
                        >
                            登录
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { setCookie } from '@/api/cookie'
import { loginIn } from '@/api/api'
import { loginrequest, loginrequestsecond, getMenu } from '@/api/authorityRequest.js'
import md5 from 'js-md5'
export default {
    data: function() {
        return {
            loginBtn: 'login_btn',
            isLoading: 0,
            username: '',
            password: '',
            isChecked: false,
            loadinglogin: null
        }
    },
    created() {
        let userData
        try {
            userData = JSON.parse(localStorage.getItem('userData'))
        } catch (error) {
            userData = null
        }
        if (userData && userData.isChecked) {
            console.log(1)
            this.isChecked = true
            this.username = userData.username
            this.password = userData.password
        } else {
            console.log(2)
            this.isChecked = false
            this.username = ''
            this.password = ''
        }
    },
    methods: {
        login: function() {
            window.sessionStorage.setItem('usernames', this.username)
            // 调用接口
            let pwd = md5(this.password)
            let requestBody = {
                username: this.username,
                password: pwd
            }
            this.isLoading = this.isLoading + 1
            /* 网关登陆接口，已经可以走通，但是下一步权限有问题 */
            this.loadinglogin = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            setTimeout(() => {
                this.loadinglogin.close()
            }, 10000)
            if (this.username !== '' && this.password !== '') {
                loginrequest(requestBody)
                    .then(res => {
                        if (res && res.status == '200') {
                            var password = requestBody.password
                            var username = requestBody.username
                            var randomKey = res.data.randomKey
                            var realm = res.data.realm
                            var encryptType = res.data.encryptType
                            //获取签名
                            var md5Salt = 'TheNextService'
                            var type = 'MD5'
                            var tem1 = username + ':' + md5Salt + ':' + password
                            var tem2 = md5(tem1)
                            var temN = md5(username + ':' + md5Salt + ':' + tem2)
                            var tem3 = temN + ':' + randomKey
                            var signature = md5(tem3)

                            var loginBean = {
                                userName: username, //用户名
                                password: tem2,
                                clientType: 'winpc', //客户端类型
                                randomKey: randomKey,
                                realm: realm, //盐值
                                encryptType: encryptType, //加密类型
                                signature: signature //签名
                            }
                            this.loginRequestBean(loginBean)
                            setTimeout(() => {
                                this.loadinglogin.close()
                            }, 1000)
                        } else {
                            // this.$message.error('用户名或密码错误')
                            this.password = ''
                            setTimeout(() => {
                                this.loadinglogin.close()
                            }, 1000)
                        }
                        this.isLoading = this.isLoading - 1
                    })
                    .catch(error => {
                        setTimeout(() => {
                            this.loadinglogin.close()
                        }, 1000)
                        const err = error || error.Error || error.response.data
                        console.log(err)
                        if (err && err.message) {
                            this.$message.error(error.message)
                        } else {
                            this.$message.error('登陆错误')
                        }
                        this.password = ''
                    })
            } else {
                this.$message.error('请输入用户名或密码')
            }
            // }
        },
        /* 二次登陆 */
        loginRequestBean(loginBean) {
            loginrequestsecond(loginBean)
                .then(async res => {
                    if (res && res.status === 200) {
                        setCookie('login_tokens', res.data.token)
                        setCookie('userName', loginBean.userName)
                        setCookie('userCode', res.data.userCode)
                        sessionStorage.setItem('login_tokens', res.data.token)
                        // 记住账号密码
                        const loginForm = {
                            isChecked: this.isChecked,
                            username: this.username,
                            password: this.password
                        }
                        localStorage.clear()
                        this.isChecked && localStorage.setItem('userData', JSON.stringify(loginForm))
                        await this.getUserMenuList()
                        this.$router.push({ path: `/` })
                    } else {
                        if (res.data && res.data.message) {
                            this.$message.error(res.data.message)
                        } else {
                            this.$message.error('未知原因错误')
                        }
                        this.password = ''
                    }
                    this.loading = false
                })
                .catch(error => {
                    const err = error.response.data
                    if (err && err.message) {
                        this.$message.error(err.message)
                    } else {
                        this.$message.error('未知原因错误')
                    }
                    this.password = ''
                    this.loading = false
                })
        },
        async getUserMenuList() {
            let menus
            let menuAuthority = {}
            let res = await getMenu({ id: window.globalData.appid })
            if (res.data && res.data.code === 200 && res.data.data) {
                menus = res.data.data.menus
                if (!menus) {
                    return
                }
                menus.forEach(p => {
                    // 菜单对应的权限
                    menuAuthority[p.name] = p.checkList
                    if (p.isFunctional === '1') {
                        p.children.forEach(j => {
                            // 菜单对应的编码
                            menuAuthority[j.name] = j.checkList
                        })
                    }
                })
                this.$store.commit('setAllAuthority', menuAuthority)
            }
        },
        enterAction: function(event) {
            if (event.keyCode === 13) {
                this.login()
            }
        }
    },
    mounted: function() {
        // console.log(this.username)
        // console.log(this.password)
        // let userData
        // try {
        //     userData = JSON.parse(localStorage.getItem('userData'))
        // } catch (error) {
        //     userData = null
        // }
        // if (userData && userData.isChecked) {
        //     console.log(1)
        //     this.isChecked = true
        //     this.username = userData.username
        //     this.password = userData.password
        // } else {
        //     console.log(2)
        //     this.isChecked = false
        //     this.username = ''
        //     this.password = ''
        // }
    },
    watch: {
        isLoading: function(newVal) {
            if (newVal <= 0) {
                this.isLoading = 0
            }
        }
    },
    components: {
        // 'login-page-line-animation': loginPageLineAnimation
    }
}
</script>
<style scoped lang="stylus">
.login {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('~@/assets/images/login/denglu_bg.png') center center;
    background-size: 100% 100%;
    z-index: 10;
    .login-container {
        width: 740px;
        height: 600px;
        .login-header {
            width: 100%;
            height: 140px;
        }
        .login-body {
            margin-top: 20px;
            margin-left: -20px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .login-main {
                width: 434px;
                height: 366px;
                background: url('~@/assets/images/login/kuang.png') center center;
                background-size: 100% 100%;
                .remember-me{
                    margin-top: 20px;
                    color:#fff;
                    .radio-btn {
                        display: inline-block;
                        width: 24px;
                        height: 24px;
                        cursor: pointer;
                        vertical-align: middle;
                        margin-right: 11px;
                        // margin-left: 15px;
                        background-color: rgba(#0e4e96, 0.6);
                        border-radius: 3px;
                        box-sizing: border-box;
                        border: solid 1px rgba(#458acc, 0.6);
                        &.active {
                            background-color: #0e6d61;
                            border: solid 1px #46fac9;
                            background-image: url('~@/assets/newimg/xuanze.png');
                            background-size: 22px 22px;
                            background-position: center center;
                            background-repeat: no-repeat;
                        }
                    }
                }

                .form-title {
                    font-family: 'MFLiHei_Noncommercial-Regular';
                    font-size: 24px;
                    line-height: 30px;
                    letter-spacing: 4px;
                    color: #ffffff;
                    position: relative;
                    width: 230px;
                    margin: 0 auto;
                    margin-top: 55px;
                    text-align: center;
                    height: 40px;
                    &:after {
                        content: '';
                        position: absolute;
                        width: 100%;
                        height: 20px;
                        left: -10px;
                        bottom: 0;
                        background: url('~@/assets/images/login/denglu_guang.png') top left;
                        background-size: 100% 100%;
                    }
                }
                .form-main {
                    width: 295px;
                    margin: 0 auto;
                    margin-top: 10px;
                    .form-label {
                        position: relative;
                        height: 60px;
                        width: 292px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .point {
                            position: absolute;
                            left: 0;
                            bottom: 4px;
                            width: 2px;
                            height: 2px;
                            background-color: #ffffff;
                        }
                        &:after {
                            content: '';
                            position: absolute;
                            width: 100%;
                            height: 1px;
                            background-color: #408fe4;
                            opacity: 0.2;
                            left: 0;
                            bottom: 5px;
                        }
                        input {
                            width: 260px;
                            font-family: 'PingFangSC-Medium';
                            font-size: 18px;
                            color: #e1f0ff;
                            border: none;
                            background: transparent;
                            text-align: left;
                            text-indent: 7px;
                            height: 50px;
                            color: #e1f0ff;
                        }
                        ::-webkit-input-placeholder {
                            font-family: 'PingFangSC-Regular';
                            font-size: 18px;
                            color: rgba(78, 153, 226, 0.5);
                        }
                    }
                    .login-btn {
                        margin-top: 20px;
                        width: 292px;
                        height: 40px;
                        line-height: 46px;
                        background: url('~@/assets/images/login/denglu_btn.png') no-repeat center center;
                        background-size: 100% 100%;
                        border-radius: 2px;
                        text-align: center;
                        font-family: 'PingFangSC-Semibold';
                        font-size: 18px;
                        color: #9effff;
                    }
                    .login-btn:hover {
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
// @media screen and (max-width: 3440px) {
//     .login {
//         width: 3440px;
//     }
// }
</style>
